﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>app - demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <link href="/base/weui/css/weui.min.css" rel="stylesheet" />
    <link href="/base/weui/css/jquery-weui.min.css" rel="stylesheet" />
    <link href="/styles/base.css" rel="stylesheet" />
</head>

<body>
    <div id="app" class="app">
        <div class="weui-grids">
            <a href="" class="weui-grid js_grid" v-for="(item,index) in CellList">
                <div class="weui-grid__icon">
                    <img v-bind:src="item.Icon" alt="">
                </div>
                <p class="weui-grid__label">
                    {{item.Name}}
                </p>
            </a>
        </div>

        <div class="weui-tabbar">
            <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
                <span style="display: inline-block;position: relative;">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
                </span>
                <p class="weui-tabbar__label">微信</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">通讯录</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <span style="display: inline-block;position: relative;">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                </span>
                <p class="weui-tabbar__label">发现</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">我</p>
            </a>
        </div>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                CellList: [{
                    key: 1,
                    Name: "天猫",
                    Icon: "https://gw.alicdn.com/tps/TB1d30fPVXXXXbGXXXXXXXXXXXX-183-144.png_.webp",
                }, {
                    key: 2,
                    Name: "聚划算",
                    Icon: "https://gw.alicdn.com/tfs/TB1lZyXcQyWBuNjy0FpXXassXXa-183-144.png?getAvatar=1_.webp",
                }, {
                    key: 3,
                    Name: "天猫国际",
                    Icon: "https://gw.alicdn.com/tfs/TB163FbPVXXXXcKXXXXXXXXXXXX-183-144.png?getAvatar=1_.webp",
                }, {
                    key: 4,
                    Name: "外卖",
                    Icon: "https://gw.alicdn.com/tps/TB1eXc7PFXXXXb4XpXXXXXXXXXX-183-144.png?getAvatar=1_.webp",
                }, {
                    key: 5,
                    Name: "天猫超市",
                    Icon: "https://gw.alicdn.com/tfs/TB1PDDqetzJ8KJjSspkXXbF7VXa-183-144.png_.webp",
                }, {
                    key: 6,
                    Name: "充值中心",
                    Icon: "https://gw.alicdn.com/tps/TB1d30fPVXXXXbGXXXXXXXXXXXX-183-144.png_.webp",
                }]
            }
        }
    })
</script>